<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="赵鹤阳">
    <title></title>
    <style>
        .box {
            width: 600px;
            height: 300px;
            margin: 80px auto;
            position: relative;
        }

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        li {
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }

        li.current {
            display: block;
        }

        .round {
            width: 300px;
            height: 30px;
            text-align: center;
            background-color: rgba(88, 99, 99, 0.2);
            margin-left: 760px;
            margin-top: -145px;
            position: absolute;
            border-radius: 20px;

        }

        .round div {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: inline-block;
             margin-left: 27px; 
             background-color: #fff; 
              margin:5px 10px;  
        }

        .round .on {
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li class="current"><a hrer="#"><img src="img/01.jpg" alt=""></a></li>
            <li><a hrer="#"><img src="img/02.jpg" alt=""></a></li>
            <li><a hrer="#"><img src="img/03.jpg" alt=""></a></li>
            <li><a hrer="#"><img src="img/04.jpg" alt=""></a></li>
            <li><a hrer="#"><img src="img/05.jpg" alt=""></a></li>
        </ul>
    </div>
    <div class="round">
        <div class="on"></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>

</html>
<script>
    var span = document.querySelectorAll('.round div');
    var lis = document.querySelectorAll('li');
    var index = 0;
    setInterval(changeImage, 1000);
    function changeImage() {
        for (var i = 0; i < lis.length; i++) {
            lis[i].className = '';
            span[i].className = '';
        }
        index++;
        if (index == 5) {
            index = 0
        }
        lis[index].className = 'current';
        span[index].className = 'on';
    }
    for (var j = 0; j < span.length; j++) {
        span[j].index = j;
        span[j].onmouseover = function () {
            clearInterval(changeImage);
            for (var i = 0; i < lis.length; i++) {
                lis[i].className = '';
                span[i].className = '';
            }
            console.log(this.index);
            lis[this.index].className = 'current';
            span[this.index].className = 'on';
        }
        span[j].onmouseout = function () {
            setInterval(changeImage, 1000);
        }
    }

</script>